<template>
    <div class="brand-box">
        <!--查询表单-->
        <div class="search-box">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="销售订单编号">
                    <el-input placeholder="销售订单编号" v-model="searchParams.sellCode"></el-input>
                </el-form-item>

                <el-form-item label="记录人">
                    <el-input placeholder="记录人" v-model="searchParams.producer"></el-input>
                </el-form-item>

                <el-form-item label="审批人">
                    <el-input placeholder="审批人" v-model="searchParams.approver"></el-input>
                </el-form-item>

                <el-form-item label="审批状态">
                    <el-select v-model="searchParams.approvalStatus" placeholder="请选择">
                        <el-option
                                v-for="item in approvalStatusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <br>
                <el-form-item label="制单时间">
                    <el-date-picker
                            v-model="createTimeOptions"
                            @change="chooseCreateTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="审批时间">
                    <el-date-picker
                            v-model="approvalTimeOptions"
                            @change="chooseApprovalTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findPage">查询</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--操作按钮-->
        <div class="crud-box">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="addVisible">新建申诉记录</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteByIds">删除</el-button>
        </div>
        <!--table展示数据-->
        <div class="table-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="checkBoxSelectionChange"
            >

                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="序号"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="sellCode"
                        label="销售订单编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="complaintName"
                        label="申诉记录名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="producer"
                        label="记录人">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createTime"
                        type="date"
                        label="记录时间"
                        :formatter="formatDate"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="approver"
                        label="审批人"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="approvalTime"
                        label="审批时间"
                        :formatter="formatDate"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="approvalStatus"
                        label="审批状态"
                        width="150">
                    <template v-slot="status">
                        <p v-if="status.row.approvalStatus===0" style="color: red">未审核</p>
                        <p v-if="status.row.approvalStatus===1||status.row.approvalStatus===3" style="color: green">已通过</p>
                        <p v-if="status.row.approvalStatus===2" style="color: orange">未通过</p>
                    </template>
                </el-table-column>
                <el-table-column
                        align="left"
                        prop="address"
                        label="操作"
                        min-width="250">
                    <template v-slot="obj">
                        <el-button type="primary" size="mini" @click="applyDetail(obj.row)">查看</el-button>
                        <el-button v-show="obj.row.approvalStatus !==1 && obj.row.approvalStatus!==3" type="success" size="mini" @click="updateVisible(obj.row)">修改</el-button>
                        <el-button type="warning" size="mini" @click="approvalDetail(obj.row)">审核跟踪</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="page-box">
            <el-pagination
                    background
                    :current-page="searchParams.currentPage"
                    :page-size="searchParams.pageSize"
                    layout="prev, pager, next"
                    @current-change="currentPageChange"
                    :total="total">
            </el-pagination>
        </div>
        <!--模态框（添加 查看 修改 审核跟踪）-->
        <div class="look-box">
            <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @close="resetFields">
                <el-form label-width="150px" :model="editApplyForm" ref="editApplyForm" >
                    <el-card>
                        <el-row >
                            <el-col :span="12">
                                <el-form-item label="申诉记录名称" prop="complaintName">
                                    <el-input size="small" v-model="editApplyForm.complaintName"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="申诉来源" prop="complaintArray">
                                    <el-input size="small" v-model="editApplyForm.complaintArray"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-form-item label="申诉记录描述" prop="complaintRemark">
                                <el-input type="textarea" size="small" v-model="editApplyForm.complaintRemark"
                                          :disabled="editForm"></el-input>
                            </el-form-item>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-row :gutter="20">
                            <el-col :span="10">
                                <el-form-item label="订单号" prop="orderId">
                                    <el-input size="small" v-model="editApplyForm.sellCode"
                                              disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button v-show="!editForm" type="primary" icon="el-icon-edit" size="mini" @click="chooseOrder">选择订单</el-button>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="投诉工单号" prop="orderId">
                                    <el-input size="small" v-model="editApplyForm.complaintId"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card>
                        <div slot="header">
                            <span>订单信息</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="text item">订单编号: {{ orderData.sellCode }}</div>
                                <div class="text item">订单类型: {{ orderData.orderType }}</div>
                                <div class="text item">订单动作: {{ orderData.orderAction }}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text item">业务类型: {{ orderData.businessType }}</div>
                                <div class="text item">订单状态: {{ orderData.orderState }}</div>
                                <div class="text item">订单日期: {{ orderData.orderCreateTime }}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card >
                        <div slot="header">
                            <span>收货人资料</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="text item">收货人姓名: {{ orderData.consigneeName }}</div>
                                <div class="text item">联系电话: {{ orderData.phoneNumber }}</div>
                                <div class="text item">收货地址: {{ orderData.deliveryAddress }}</div>
                                <div class="text item">邮政编码: {{ orderData.postalCode }}</div>
                                <div class="text item">配送费用: {{ orderData.deliveryCost }}</div>
                                <div class="text item">支付方式: {{ orderData.payWay }}</div>
                                <div class="text item">汇款人: {{ orderData.payer }}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text item">会员账号: {{ orderData.memberAccount }}</div>
                                <div class="text item">联系手机: {{ orderData.cellphoneNumber }}</div>
                                <div class="text item">配送地区: {{ orderData.deliveryArea }}</div>
                                <div class="text item">配送方式: {{ orderData.deliveryWay }}</div>
                                <div class="text item">自提时间: {{ orderData.selfPickupTime }}</div>
                                <div class="text item">电子邮箱: {{ orderData.email }}</div>
                            </el-col>
                        </el-row>
                        <div class="text item">备注: {{ orderData.remark }}</div>
                    </el-card>
                    <el-card>
                        <div slot="header">
                            <span>订单商品信息</span>
                        </div>
                            <el-table
                                    :data="orderData.sellOrderGoodsList"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        align="center"
                                        prop="connectCode"
                                        label="商品串码"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="goodName"
                                        label="商品名称"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="goodMallprice"
                                        label="单价"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="count"
                                        label="数量"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="totalMoney"
                                        label="总金额"
                                        width="100">
                                </el-table-column>

                            </el-table>
                    </el-card>
                    <el-card>
                        <div slot="header">
                            <span>退换商品信息</span>
                            <el-button v-show="!editForm"  type="primary" icon="el-icon-edit" size="mini" @click="chooseGood">选择商品</el-button>
                        </div>
                        <el-table
                                :data="editApplyForm.list"
                                style="width: 100%"
                        >
                            <el-table-column
                                    align="center"
                                    prop="connectCode"
                                    label="商品串码"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="goodName"
                                    label="商品名称"
                                    width="150">
                            </el-table-column>
                            <el-table-column align="center"
                                             prop="status"
                                             label="退换货类型"
                                             width="300">
                                <template v-slot="obj">
                                        <el-select v-model="obj.row.status" placeholder="请选择"  :disabled="editForm">
                                            <el-option
                                                    v-for="item in goodStatusOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                   >
                                            </el-option>
                                        </el-select>
                                    <el-button v-show="obj.row.status===2" type="primary" icon="el-icon-edit" size="mini">选择新商品</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-card>
                    <el-card>
                        <div slot="header">
                            <span>检修信息</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="检修单号" prop="overhaulId">
                                    <el-input size="small" v-model="editApplyForm.overhaulId"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                                <el-form-item label="检修点名称" prop="overhaulName">
                                    <el-input size="small" v-model="editApplyForm.overhaulName"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="客户申请时间" prop="overhaulTime">
                                    <el-date-picker
                                            size="small"
                                            v-model="editApplyForm.overhaulTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            :disabled="editForm">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="检修点电话" prop="overhaulPhone">
                                    <el-input size="small" v-model="editApplyForm.overhaulPhone"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row >
                            <el-form-item label="备注" prop="remarks">
                                <el-input type="textarea" size="small" v-model="editApplyForm.remarks"
                                          placeholder="请输入备注"
                                          :disabled="editForm"></el-input>
                            </el-form-item>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <el-form-item label="客服答复意见" prop="oneIdea">
                                    <el-input type="textarea" size="small" v-model="editApplyForm.oneIdea"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                                <el-form-item label="二次客服答复意见"  prop="twoIdea" v-if="editApplyForm.twoIdea !== null || !editForm">
                                    <el-input type="textarea" size="small" v-model="editApplyForm.twoIdea"
                                              :disabled="editForm"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="客服答复时间" prop="oneTime">
                                    <el-date-picker
                                            size="small"
                                            v-model="editApplyForm.oneTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            :disabled="editForm">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="二次客服答复时间"  prop="twoTime" v-if="editApplyForm.twoIdea !== null || !editForm">
                                    <el-date-picker
                                            size="small"
                                            v-model="editApplyForm.twoTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            :disabled="editForm">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card v-show="title==='审核跟踪'||editApplyForm.approvalStatus ===2">
                        <div slot="header">
                            <span>审核信息</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="text item">审批人: {{ editApplyForm.approver }}</div>

                            </el-col>
                            <el-col :span="8">
                                <div class="text item" v-if="editApplyForm.approvalStatus === 0">
                                    审批状态:未审批
                                </div>
                                <div class="text item" v-else-if="editApplyForm.approvalStatus === 1">
                                    审批状态:已通过
                                </div>
                                <div class="text item" v-else-if="editApplyForm.approvalStatus === 2">
                                    审批状态:未通过
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="text item">审批日期: {{ editApplyForm.approvalTime }}</div>
                            </el-col>
                        </el-row>
                        <div class="text item">审批意见: {{ editApplyForm.approvalIdea }}</div>
                    </el-card>
                    <el-form-item >
                        <el-button v-show="title==='添加申诉记录单'" size="small" type="success" @click="addApply()">提交</el-button>
                        <el-button v-show="title==='修改申诉记录单'" size="small" type="success" @click="updateApply()">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div class="chooseGood-Box">
            <el-dialog title="退换商品选择" :visible.sync="chooseGoodVisible" width="50%" @close="resetChooseGood">
                <template>
                    <el-transfer v-model="chooseGoodDate"
                                 :data="orderGoodDate"
                                 :titles="['订单商品', '退换货商品']">
                        <el-button class="transfer-footer" slot="right-footer" size="small" @click="addChooseGood">确定</el-button>
                    </el-transfer>
                </template>
            </el-dialog>
        </div>
        <div class="chooseOrder-Box">
            <el-dialog title="订单选择" :visible.sync="chooseOrderVisible" width="50%" >
                <el-table
                        :data="orderFindDate"
                        style="width: 100%"
                >
                    <el-table-column
                            align="center"
                            label="序号"
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="sellCode"
                            label="销售订单编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="orderType"
                            label="订单类型"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="orderCreateTime"
                            type="date"
                            label="订单时间"
                            :formatter="formatDate"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            prop="address"
                            label="操作"
                            min-width="250">
                        <template v-slot="obj">
                            <el-button type="primary" size="mini" @click="addOrder(obj.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        background
                        :current-page="searchOrderParams.currentPage"
                        :page-size="searchOrderParams.pageSize"
                        layout="prev, pager, next"
                        @current-change="currentOrderPageChange"
                        :total="orderTotal">
                </el-pagination>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import complaint from './complaint';

    export default complaint;
</script>

<style src="./complaint.scss" lang="scss">
</style>